<template>
    <div class="header-wrapper">
        <div style="-webkit-app-region: drag;height:120px;" >
            <p class="header-tool" style="-webkit-app-region: no-drag">
                <span @click="min"><i class="min"></i></span>
                <span @click="max"><i class="max" ref="max"></i></span>
                <span @click="close"><i class="close"></i></span>
            </p>
            <p class="clear-float"></p>
            <p class="header-title">
                <slot></slot>
            </p>
        </div>
    </div>
</template>

<script>
import { ipcRenderer } from 'electron';
import { mapGetters, mapActions } from 'vuex';
export default {
    name: "vHeader",
    data(){
        return {
            timer: null
        }
    },
    computed:{
        ...mapGetters(['isMaximized'])
    },
    methods: {
        ...mapActions(['changeWindow']),
        min(){
            ipcRenderer.send('minimize-window');
        },
        close(){
            this.$confirm(this.$t("settings.closeTitle"), '', {
                distinguishCancelAndClose: true,
                confirmButtonText: this.$t("settings.closeConfirm"),
                cancelButtonText: this.$t("settings.closeCancle"),
                type: 'warning'
            }).then(() => {
                console.log('close')
                ipcRenderer.send('close-window');
            }).catch((action) => {
                if(action === 'cancel'){
                    console.log('hide')
                    this.timer = setTimeout(()=>{
                        ipcRenderer.send('hide-window');
                    },500)
                }else{
                    console.log('close dialog')
                }
            });
        },
        max(){
            // 获取当前是放大窗口还是恢复原本窗口
            if(this.isMaximized == 'true'){
                // 当前是放大状态-->点击要还原窗口
                console.log('当前是放大状态-->点击要还原窗口')
                this.$refs.max.style.background="url("+require('./images/maximize.svg')+") no-repeat center bottom"
                ipcRenderer.send('orignal-window');
                this.changeWindow('false')
            }else{
                // 当前是正常窗口-->点击放大窗口
                console.log('默认是正常窗口-->点击放大窗口')
                this.$refs.max.style.background="url("+require('./images/restore.svg')+") no-repeat center bottom"
                ipcRenderer.send('maximize-window');
                this.changeWindow('true')
            }
        }
    },
    beforeDestroy() {
        if(this.timer) {
            clearTimeout(this.timer);
        }
    }
}
</script>

<style lang="less" scoped>
.header-wrapper{
    width: 100%;
    height: 120px;
    background:url(./images/bg-header.png) no-repeat 0 0;
    background-size:cover;
    .header-tool{
        float: right;
        height: 20px;
        line-height:20px;
        span{
            margin-right:12px;
            font-size:8px;
            color:#24272B;
            cursor:pointer;
        }
    }
    .clear-float{
        clear: both;
    }
    .header-title{
        font-weight: 600;
        padding-left: 25px;
        height: 30px;
        line-height:30px;
        font-size: 16px;
        color: #24272B;
    }
    .min{
        display: inline-block;
        width: 10px;
        height: 8px;
        background: url("./images/minimize.svg") no-repeat center center
    }
    .max{
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url("./images/maximize.svg") no-repeat center bottom
    }
    .close{
        display: inline-block;
        width: 10px;
        height: 10px;
        background: url("./images/close.svg") no-repeat center bottom
    }
}
</style>
